<template>
   <div class="role">
		<el-row class="tac">
		  <el-col :span="24">
		    <div class="role-but-box">
                <h5 class="role-explain">岗位角色管理</h5>
		    	<el-button type="primary" plain>刷新</el-button>
		    	<el-button type="primary" @click="roleAdd" plain>新增</el-button>
		    	<el-button type="primary" @click="roleUpdate" plain>修改</el-button>
		    	<el-button type="danger" @click="delRole" plain>删除</el-button>
		    </div>
			<dropdown ref="dropdown"  v-if="listData.length > 0" :listData="listData" v-on:getRoleList="getRoleList()"></dropdown>
		  </el-col>
		</el-row>
		<roleDialog ref="role_dialog" v-on:getRoleList="getRoleList()" :listData="listData"></roleDialog>
    </div>
</template>
<script>
import dropdown from './components/role-dropdown.vue'
import roleDialog from './components/role-dialog.vue'
 export default {
    data() {
      return {
        listData:[]
      }
    },
    methods: {
     roleAdd(){    //新增
     	this.$refs.role_dialog.roleAddFn('add');
     },
     roleUpdate(){ // 修改
         this.$refs.dropdown.updateFn('update');
     },
     delRole(){   //删除
     	this.$refs.dropdown.roleDelFn();
     },
     getRoleList(){
     	this.$post("/role/getRoleList",{companyid:this.$store.getters.companyId},(data)=>{
    		this.listData = data;
    	},(err)=>{
    		alert(err);
    	});
     }
    },
    created(){
    	this.getRoleList();
    },
    components:{
    	dropdown,
    	roleDialog
    }
  }
</script>

<style>
.role{
	text-align: left;
}
.role-explain{
	font-size: 15px;
    float: left;
    padding-left: 20px;
    padding-top: 10px;
}
.role-but-box{
	padding:20px 0;
	text-align: right;
}
</style>
